<template>
    <div class="set_project_flow">
        <title-back title="项目流程设置"></title-back>
        <div class="dis-flex project-notice" v-for="(item, index) in flowList" :key="index">
            <div class="project-notice_left">
                <div class="flow_deploy">
                    <input type="text" :value="item.valueTitle">
                    <p @click="addFlow(item, index)"><a>下方新增流程</a></p>
                    <p><a>流程上移</a></p>
                    <p><a>流程下移</a></p>
                    <p><a>删除流程</a></p>
                </div>
                <div class="files_upload">
                    <p>*附件上传</p>
                    <p v-for="(info, infoIndex) in item.fileList" :key="infoIndex">
                        <span>{{info.name}}</span>
                        <a @click="delFile(item, infoIndex)">删除</a>
                    </p>
                    <a @click="addFile(item)">上传附件</a>
                </div>
                <div class="stage_state">
                    <a>进入该阶段</a>
                </div>
                <div class="release_time">
                    <p>预发布时间设置</p>
                    <p><DatePicker v-model="item.dateTime" format="yyyy/MM/dd HH:mm" type="datetime" placeholder="日期" style="width: 160px;"></DatePicker></p>
                </div>
            </div>
            <div class="project-notice_right">
                <i-quill v-model="item.valueText" :min-height="400" />
            </div>
        </div>
        <div class="dis-flex btn_wapper">
            <p style="width: 80px"></p>
            <div class="btn">
                <button @click="save">保存</button>
                <button @click="back">返回</button>
            </div>
        </div>
    </div>
</template>

<script>
    import titleBack from "../../common/title_back.vue";
    import iQuill from '@/components/quill';
    export default {
        components: {
            titleBack,
            iQuill
        },
        data() {
            return {
                flowList: [
                    {
                        valueTitle: "报名和资格审查",
                        valueText: "",
                        fileList: [
                            {
                                name: "公告文件1.doc",
                                url: ""
                            },
                            {
                                name: "公告文件2.pdf",
                                url: ""
                            }
                        ],
                        dateTime: new Date
                    }
                ]
            }
        },
        methods: {
            // 保存
            save() {
                console.log(this.flowList)
            },
            back() {
                this.$router.go(-1)
            },
            /* 新增流程 */
            addFlow(item, index) {
                let info = {
                    valueTitle: "",
                    valueText: "",
                    fileList: [
                        {
                            name: "",
                            url: ""
                        }
                    ],
                    dateTime: new Date
                }
                // 在指定位置添加元素,第一个参数指定位置,第二个参数指定要删除的元素,如果为0,则追加
                this.flowList.splice(++index, 0, info)
            },
            /* 上传附件 */
            addFile(item, index) {
                item.fileList.push({name: "公告文件3.doc",url: ""})
            },
            /* 删除附件 */
            delFile(item, index) {
                item.fileList.splice(index, 1)
            }
        }
    }
</script>

<style lang="less" scoped>
.set_project_flow {
    padding: 0 15px 20px 15px;
    .project-notice {
        margin-bottom: 20px;
        .project-notice_left {
            margin-right: 10px;
            .flow_deploy {}
            .files_upload {
                margin-top: 20px;
            }
            .stage_state {
                margin-top: 20px;
            }
            .release_time {
                margin-top: 20px;
                p {
                    margin-bottom: 5px;
                }
            }
        }
        .project-notice_right {
            border: 1px solid #ccc;
        }
    }
    .btn_wapper {
        margin-top: 20px;
        .btn {
            button {
                width: 165px;
                margin-right: 20px;
            }
        }
    }
}
</style>